hero.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. body{
  2. overflow-x: hidden;
  3. }
  4. .home{
  5. .__img-hero{
  6. width: 100vw;
  7. position: relative;
  8. left: 50%;
  9. right: 50%;
  10. margin-left: -50vw;
  11. margin-right: -50vw;
  12. }
  13. }
  14. .__img-hero{
  15. height: 500px;
  16. img{
  17. width:100%;
  18. height: 100%;
  19. object-fit: cover;
  20. }
  21. }
  22. .participant_full{
  23. .hero{
  24. figure{
  25. width:100%;
  26. .__img{
  27. &> div{
  28. margin: auto;
  29. width: 300px;
  30. height: 300px;
  31. }
  32. img{
  33. border-radius: 100%;
  34. width: 100%;
  35. height: 100%;
  36. object-fit: cover;
  37. }
  38. }
  39. figcaption {
  40. align-self: center;
  41. text-align: center;
  42. margin: 2rem 0;
  43. }
  44. }
  45. }
  46. }
  47. @media screen and (min-width: 768px) {
  48. .participant_full{
  49. .hero{
  50. figure{
  51. width:100%;
  52. .__img{
  53. margin-right: 2rem;
  54. &> div{
  55. width: 300px;
  56. height: 300px;
  57. }
  58. img{
  59. border-radius: 100%;
  60. width: 100%;
  61. height: 100%;
  62. object-fit: cover;
  63. }
  64. }
  65. figcaption {
  66. align-self: center;
  67. }
  68. }
  69. }
  70. }
  71. }