/*
   imported from contact.scss 
*/

/*
  When adding a color, please add it to the :export section at the end of this file.
  If you need to add a new section/type of color, you can add the section title to the :export by pre-prending it with an underscore.
*/
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* Primary Colors */
/* Secondary Colors */
/* Gradients */
/* Transparencies */
/* stylelint-disable */

/* stylelint-enable */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* IMPORT_PT: update these as the project sees fit */
/* Line Heights */
/* stylelint-disable */

/* stylelint-enable */
/**
  If making changes to this file, please make sure the changes are reflected on the :export section at the end of the file.
 */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
/* IMPORT_PT: update these as the project sees fit */
/* stylelint-disable */

/* stylelint-enable */
/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */
/**
 * Lightens or darkens a color based on its brightness
 */
/**
* This takes the current $color of the parent and sets the icon color
* to be the currentColor
*/
/**
* Determines the icon size for various different sizes of buttons
*/
.contact__contact___2-wh2 {
  border-radius: 8px;
  display: grid;
  grid-template-areas: "icon actions" "details actions";
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(2, 1fr);
  padding: calc(12.26277px + 1.16788vw);
  width: 100%; }
  @media only screen and (max-width: 576px) {
    .contact__contact___2-wh2 {
      align-items: center;
      grid-gap: calc(7.06569px + 0.29197vw);
      grid-template-areas: "icon details actions";
      grid-template-columns: 42px 1fr 8px;
      grid-template-rows: 60px;
      padding: calc(10.13139px + 0.58394vw); } }

.contact__icon___1oaNt {
  grid-area: icon; }
  @media only screen and (max-width: 576px) {
    .contact__icon___1oaNt {
      height: 54px;
      width: 42px; } }

.contact__details___2HbcV {
  align-self: end;
  grid-area: details;
  overflow: hidden;
  white-space: nowrap; }
  .contact__details___2HbcV h2,
  .contact__details___2HbcV h4 {
    overflow: hidden;
    text-overflow: ellipsis; }
  @media only screen and (max-width: 576px) {
    .contact__details___2HbcV {
      align-self: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      .contact__details___2HbcV h2,
      .contact__details___2HbcV h4 {
        margin: 0; }
      .contact__details___2HbcV h4 {
        font-size: calc(14px + 4 * (100vw - 320px) / 1120) !important; } }

.contact__actions___1NtNq {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  grid-area: actions;
  justify-content: space-between; }

.contact__editIcon___dY9BK {
  align-items: flex-start;
  display: flex;
  justify-content: flex-end; }

.contact__buttons___3-pKe {
  display: flex;
  flex-direction: column; }
  .contact__buttons___3-pKe > button {
    margin-top: calc(6.13139px + 0.58394vw); }
    @media only screen and (max-width: 576px) {
      .contact__buttons___3-pKe > button {
        margin: calc(3.06569px + 0.29197vw) 0; } }